<template>
  <div class="add-equipment-maintenance">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button type="default" @click="goBack" icon="el-icon-arrow-left">
          返回
        </el-button>
        <h2 class="page-title">新增设备维修记录</h2>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-card class="form-card">
        <el-form
          ref="maintenanceForm"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          class="maintenance-form"
        >
          <!-- 设备信息 -->
          <div class="form-section">
            <h3 class="section-title">设备信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="选择设备" prop="equipmentId">
                  <el-select
                    v-model="formData.equipmentId"
                    placeholder="请选择设备"
                    style="width: 100%"
                    @change="handleEquipmentChange"
                    filterable
                  >
                    <el-option
                      v-for="equipment in equipmentList"
                      :key="equipment.equipmentId"
                      :label="`${equipment.equipmentName} (${equipment.equipmentCode})`"
                      :value="equipment.equipmentId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备编码">
                  <el-input v-model="formData.equipmentCode" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="设备名称">
                  <el-input v-model="formData.equipmentName" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备位置">
                  <el-input v-model="formData.equipmentLocation" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 维修信息 -->
          <div class="form-section">
            <h3 class="section-title">维修信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="维修项目" prop="maintenanceItem">
                  <el-input
                    v-model="formData.maintenanceItem"
                    placeholder="请输入维修项目"
                    maxlength="100"
                    show-word-limit
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修人员" prop="maintenancePerson">
                  <el-input
                    v-model="formData.maintenancePerson"
                    placeholder="请输入维修人员姓名"
                    maxlength="50"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="维修时间" prop="maintenanceTime">
                  <el-date-picker
                    v-model="formData.maintenanceTime"
                    type="date"
                    placeholder="选择维修时间"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修工时" prop="maintenanceHours">
                  <el-input-number
                    v-model="formData.maintenanceHours"
                    :min="0"
                    :max="999"
                    :precision="1"
                    style="width: 100%"
                    placeholder="请输入维修工时"
                  />
                  <span class="unit-text">小时</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="维修费用" prop="maintenanceCost">
                  <el-input-number
                    v-model="formData.maintenanceCost"
                    :min="0"
                    :max="999999.99"
                    :precision="2"
                    style="width: 100%"
                    placeholder="请输入维修费用"
                  />
                  <span class="unit-text">元</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理情况">
                  <el-select v-model="formData.handlingSituation" placeholder="请选择处理情况" style="width: 100%">
                    <el-option label="待处理" value="0" />
                    <el-option label="进行中" value="1" />
                    <el-option label="已完成" value="2" />
                    <el-option label="已取消" value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 故障详情 -->
          <div class="form-section">
            <h3 class="section-title">故障详情</h3>
            <el-form-item label="故障描述" prop="faultDescription">
              <el-input
                v-model="formData.faultDescription"
                type="textarea"
                :rows="4"
                placeholder="请详细描述设备故障情况"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </div>

          <!-- 操作按钮 -->
          <div class="form-actions">
            <el-button @click="goBack" size="large">取消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitLoading" size="large">
              保存
            </el-button>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { equipmentApi, equipmentMaintenanceApi } from '@/api/equipment'

export default {
  name: 'AddEquipmentMaintenance',
  data() {
    return {
      loading: false,
      submitLoading: false,
      
      // 设备列表
      equipmentList: [],
      
      // 表单数据
      formData: {
        equipmentId: '',
        equipmentCode: '',
        equipmentName: '',
        equipmentLocation: '',
        maintenanceItem: '',
        maintenancePerson: '',
        maintenanceTime: '',
        maintenanceHours: 0,
        maintenanceCost: 0,
        faultDescription: '',
        handlingSituation: '0'
      },
      
      // 表单验证规则
      formRules: {
        equipmentId: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        maintenanceItem: [
          { required: true, message: '请输入维修项目', trigger: 'blur' },
          { min: 2, max: 100, message: '维修项目长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        maintenancePerson: [
          { required: true, message: '请输入维修人员', trigger: 'blur' },
          { min: 2, max: 50, message: '维修人员姓名长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        maintenanceTime: [
          { required: true, message: '请选择维修时间', trigger: 'change' }
        ],
        maintenanceHours: [
          { required: true, message: '请输入维修工时', trigger: 'blur' },
          { type: 'number', min: 0, max: 999, message: '维修工时必须在 0-999 之间', trigger: 'blur' }
        ],
        maintenanceCost: [
          { required: true, message: '请输入维修费用', trigger: 'blur' },
          { type: 'number', min: 0, max: 999999.99, message: '维修费用必须在 0-999999.99 之间', trigger: 'blur' }
        ],
        faultDescription: [
          { max: 500, message: '故障描述不能超过 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  
  mounted() {
    this.getEquipmentList()
  },
  
  methods: {
    // 获取设备列表
    async getEquipmentList() {
      try {
        this.loading = true
        const response = await equipmentApi.getAllEquipmentNames()
        if (response.code === 200) {
          this.equipmentList = response.data || []
        } else {
          this.$message.error(response.data.message || '获取设备列表失败')
        }
      } catch (error) {
        console.error('获取设备列表失败:', error)
        this.$message.error('获取设备列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 设备选择变化
    handleEquipmentChange(equipmentId) {
      const equipment = this.equipmentList.find(item => item.equipmentId === equipmentId)
      if (equipment) {
        this.formData.equipmentCode = equipment.equipmentCode || ''
        this.formData.equipmentName = equipment.equipmentName || ''
        this.formData.equipmentLocation = equipment.equipmentLocation || ''
      }
    },
    
    // 提交表单
    async handleSubmit() {
      try {
        await this.$refs.maintenanceForm.validate()
        
        this.submitLoading = true
        
        const submitData = {
          ...this.formData,
          maintenanceTime: this.formData.maintenanceTime,
          maintenanceHours: Number(this.formData.maintenanceHours),
          maintenanceCost: Number(this.formData.maintenanceCost)
        }
        
        const response = await equipmentMaintenanceApi.addMaintenance(submitData)
        
        if (response.code === 200) {
          this.$message.success('新增设备维修记录成功')
          this.$router.push('/equipment-management/equipment-maintenance')
        } else {
          this.$message.error(response.data.message || '新增失败')
        }
      } catch (error) {
        if (error !== false) { // 表单验证失败时不显示错误消息
          console.error('提交失败:', error)
          this.$message.error('提交失败，请检查输入信息')
        }
      } finally {
        this.submitLoading = false
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.add-equipment-maintenance {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.main-content {
  max-width: 1000px;
  margin: 0 auto;
}

.form-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.maintenance-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.unit-text {
  margin-left: 8px;
  color: #666;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.form-actions .el-button {
  min-width: 120px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .add-equipment-maintenance {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .maintenance-form {
    padding: 15px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .form-actions .el-button {
    width: 100%;
  }
}

/* 表单项样式优化 */
.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: #333;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 4px;
}

.el-select {
  width: 100%;
}

/* 卡片样式 */
.el-card {
  border: none;
}

.el-card__body {
  padding: 0;
}
</style>
